<div class="gamename">
    <img src="img/text.png" alt="TETRIS"> 
</div>
<button class="button-width" id="start">START</button>
<button class="button-width" id="options">OPTIONS</button>
<button class="button-width" id="score">HIGHSCORE</button>
<div class="logo">
    <img src="img/logo.png" alt="Team Coconut">
</div>     
<script>
    $(function() {
        //declare theme of the button
        $(".button-width").button();
    });
    //navigation - load subfiles inside the main div
    $(document).ready(function() {
        $(".button-width").click(function() {
            if ($(this).is('#start')) {
                $("#mainbody").hide().load("game.html", function(response, status, xhr) {
                    if (status === "error") {
                        // handle error 
                    }
                    else
                    {
                        $(this).fadeIn();
                    }
                });
            }
            else if ($(this).is('#options')) {
                $("#mainbody").hide().load('options.html', function(response, status, xhr) {
                    if (status === "error") {
                        // handle error 
                    }
                    else
                    {
                        $(this).fadeIn();
                    }
                });

            }
            else if ($(this).is('#score')) {
                $("#mainbody").hide().load('score.html', function(response, status, xhr) {
                    if (status === "error") {
                        // handle error 
                    }
                    else
                    {
                        $(this).fadeIn();
                    }
                });
            }
        });
    });
</script>